<template>
  <div class="app-container">
    <part-comp title="个人基本信息" class="mb_15"/>
    <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="9" :xl="9">
            <div class="userbox whitebg">
                <div class="flexcolumn">
                    <div class="flexcolumn aligncenter">
                        <img src="@/assets/images/avatar.png" alt="" class="mb_6 useravatar">
                        <span class="overflowtext usertitle">{{user.user_login}}</span>
                    </div>
                    <div class="flexcenter infobox">
                        <div class="flexcolumn aligncenter infoitem">
                            <img src="@/assets/images/sex.png" alt="">
                            <span v-if="user.sex||user.sex==0">
                                <span class="overflowtext" v-if="user.sex==1">男</span>
                                <span class="overflowtext" v-else-if="user.sex==2">女</span>
                                <span class="overflowtext" v-else>-</span>
                            </span>
                            <span v-else>-</span>
                        </div>
                        <div class="flexcolumn aligncenter infoitem">
                            <img src="@/assets/images/phone.png" alt="">
                            <span class="overflowtext">{{user.phone||'-'}}</span>
                        </div>
                        <div class="flexcolumn aligncenter infoitem">
                            <img src="@/assets/images/payfor.png" alt="">
                            <template v-if="user.pay_type">
                                <span class="overflowtext" v-if="user.pay_type==1">支付宝</span>
                                <span class="overflowtext" v-if="user.pay_type==2">微信支付</span>
                            </template>
                            <template v-else>
                                <span class="overflowtext">-</span>
                            </template>
                        </div>
                        <div class="flexcolumn aligncenter infoitem">
                            <img src="@/assets/images/account.png" alt="">
                            <span class="overflowtext">{{user.account||'-'}}</span>
                        </div>
                    </div>
                    <div class="flexcenter flexaround mt_15">
                        <el-button type="primary" size="small" class="userbtn" @click="handleEdit">编辑个人信息</el-button>
                        <el-button type="success" size="small" class="userbtn" @click="handleMsg">发消息</el-button>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="15" :xl="15">
            <div class="imgbox mb_20">
                <img src="@/assets/images/userbg.png" alt="">
            </div>
            <el-row :gutter="20">
                <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                    <div class="grid-content bg-purple1">
                        <div class="num_title">今日完成数量</div>
                        <div class="num_box flexrowbetween">
                            <div><span class="num_s">{{count.today||0}}</span>单</div>
                            <img src="@/assets/images/icon1.png" alt="" srcset="">
                        </div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                    <div class="grid-content bg-purple2">
                        <div class="num_title">提现金额</div>
                        <div class="num_box flexrowbetween">
                            <div><span class="num_s">{{count.pay||0}}</span>元</div>
                            <img src="@/assets/images/icon2.png" alt="" srcset="">
                        </div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                    <div class="grid-content bg-purple3">
                        <div class="num_title">结算金额</div>
                        <div class="num_box flexrowbetween">
                            <div><span class="num_s">{{count.coin||0}}</span>元</div>
                            <img src="@/assets/images/icon3.png" alt="" srcset="">
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
    <div class="tablebox mt_15 whitebg">
        <div class="flexrowbetween border_b p_10">
            <span class="tabletitle">个人收入详情</span>
            <el-button type="primary" size="small" @click="handlePayfor">申请提现</el-button>
        </div>
        <el-table v-loading="listLoading"
            :data="list"
            class="whitetable">
            <el-table-column label="序号" prop="id" >
                <template slot-scope="scope">
                    <span>{{(queryParams.page - 1) * queryParams.num + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="公众号" prop="author" >
                <template slot-scope="scope">
                    <span class="">{{scope.row.author}}</span>
                </template>
            </el-table-column>
            <el-table-column label="地区">
                <template slot-scope="scope">
                    <span >{{ scope.row.province?scope.row.province:'-' }}{{ scope.row.city?'-'+scope.row.city:''}}{{ scope.row.area?'-'+scope.row.area:'' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="地区级别">
                <template slot-scope="scope">
                    <span v-if="scope.row.his_saleObj">{{levelName(scope.row.active_level)||'-'}}</span>
                    <span v-else>{{levelName(scope.row.active_level)||'-'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="标题">
                <template slot-scope="scope">
                    <span >{{ scope.row.title}}</span>
                </template>
            </el-table-column>
            <el-table-column label="原始链接">
                <template slot-scope="scope">
                    <a class="comm_link" v-if="scope.row.url" :href="scope.row.url" target="_blank">点击跳转</a>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="活动链接">
                <template slot-scope="scope">
                    <a class="comm_link" v-if="scope.row.user_url" :href="scope.row.user_url" target="_blank">点击跳转</a>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="活动时间">
                <template slot-scope="scope">
                    <span v-if="!Array.isArray(scope.row.tp_arr)">{{ parseTime(scope.row.tp_arr.start,'{y}-{m}-{d}') }} - {{parseTime(scope.row.tp_arr.end,'{y}-{m}-{d}') }}</span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="活动提醒时间" width="120">
                <template slot-scope="scope">
                    <span>{{scope.row.remind_time=='1970-01-01'?'-':scope.row.remind_time}}</span>
                </template>
            </el-table-column>
            <el-table-column label="拉取时间">
                <template slot-scope="scope">
                    <span>{{scope.row.create_time}}</span>
                </template>
            </el-table-column>
            <el-table-column label="活动类型">
                <template slot-scope="scope">
                    <span>{{scope.row.class_name||'-'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="活动票数">
                <template slot-scope="scope">
                    <span>{{scope.row.num||0}}</span>
                </template>
            </el-table-column>
            <el-table-column label="主办方">
                <template slot-scope="scope">
                    <span v-if="scope.row.cosponsor&&scope.row.cosponsor.length">
                        <span v-for="(item,index) in scope.row.cosponsor" :key="index">{{item.co_sponsor}},</span>
                    </span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="活动联系人" width="120">
                <template slot-scope="scope">
                    <span v-if="scope.row.contacts&&scope.row.contacts.length">{{scope.row.contacts[0].username}}</span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="联系方式">
                <template slot-scope="scope">
                    <span v-if="scope.row.contacts&&scope.row.contacts.length">{{scope.row.contacts[0].phone}}</span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="完成时间">
                <template slot-scope="scope">
                    <span>{{scope.row.last_time}}</span>
                </template>
            </el-table-column>
            <el-table-column label="审核人">
                <template slot-scope="scope">
                    <span>{{scope.row.admin?scope.row.admin.user_login:'-'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="提现金额">
                <template slot-scope="scope">
                    <span>￥{{scope.row.coin}}</span>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.num"
            @pagination="getList"
            />
    </div>

    <el-dialog title="编辑个人信息" :close-on-click-modal='false' :visible.sync="userdialog" width="620px" append-to-body>
        <edituser-dialog v-if="userdialog" @close='handleCloseEdit' />
    </el-dialog>

    <el-dialog title="发消息" :close-on-click-modal='false' :visible.sync="msgdialog" width="620px" append-to-body>
        <msg-dialog v-if="msgdialog" @close='handleClosemsg' />
    </el-dialog>
    
    <el-dialog title="申请提现" :close-on-click-modal='false' :visible.sync="paydialog" width="620px" append-to-body>
        <pay-dialog v-if="paydialog" @close='handleClosepay' :count='count' />
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import PartComp from '@/components/PartComp';
import PayDialog from './components/PayDialog.vue';
import EdituserDialog from './components/EdituserDialog.vue';
import MsgDialog from '../withdrawal/components/MsgDialog.vue';
import { levelName } from '@/api/datalist';
import { payinfo } from '@/api/resource';
import { userpayCount } from '@/api/home'
export default {
    components:{
        PartComp,
        EdituserDialog,
        MsgDialog,
        PayDialog
    },
    data(){
        return {
            count:{},
            listLoading:false,
            list:[],
            queryParams:{
                page:1,
                num:10
            },
            total:0,
            userdialog:false,
            msgdialog:false,
            paydialog:false
        }
    },

    created(){
        this.getCount();
        this.getList();
    },

    computed: {
        ...mapState({
            user: state => state.user.user,
        }),

        levelName(){
            return levelName
        },
    },

    methods:{

        getCount(){
            userpayCount().then(res=>{
                if(res.code == 1){
                    this.count = res.data;
                }
            })
        },

        getList(){
            this.listLoading=true;
            payinfo(this.queryParams).then(res=>{
                this.listLoading=false;
                this.list = res.data.list;
                this.total = res.data.count;
            }).catch(()=>{
                this.listLoading = false;
            })
        },

        handleEdit(){
            this.userdialog = true
        },

        handleCloseEdit(type){
            if(type == 1){
                this.getList()
            }
            this.userdialog = false
        },

        handleMsg(){
            this.msgdialog = true
        },

        handleClosemsg(){
            this.msgdialog = false
        },

        handlePayfor(){
            this.paydialog = true;
        },

        handleClosepay(type){
            if(type==1){
                this.getCount();
            }
            this.paydialog = false;
        }
    }
}
</script>

<style lang="scss" scoped>
.userbox{
    width: 100%;
    height: 230px;
    border-radius: 6px;
    padding: 15px 10px;
    .useravatar{
        width: 42px;
        height: 42px;
    }
    .usertitle{
        padding: 0 15px;
        max-width: 100%;
        font-size: 14px;
        color: #000;
    }
    .infobox{
        background-color: #F6F7FC;
        padding:10px 8px;
        border-radius: 6px;
        margin-top: 12px;
    }
    .infoitem{
        flex: 1;

        img{
            width: 20px;
            height: 20px;
            margin-top: 6px;
        }

        span{
            display: inline-block;
            max-width: 100%;
            padding: 6px 10px;
        }
    }
}
.imgbox{
    width: 100%;
    height: 106px;
    img{
        width: 100%;
        height: 100%;
    }
}
.grid-content{
    padding: 15px;
    height: 106px;
    width: 100%;
    border-radius: 6px;
}
.bg-purple1{
    background: url('../../assets/images/bg1.png') center no-repeat;
    background-size: cover;
}
.bg-purple2{
    background: url('../../assets/images/bg2.png') center no-repeat;
    background-size: cover;
}
.bg-purple3{
    background: url('../../assets/images/bg3.png') center no-repeat;
    background-size: cover;
}
.num_title{
    margin-bottom: 15px;
}
.num_box{
    .num_s{
        font-size: 28px;
        margin-right: 3px;
    }
    img{
        width: 50px;
        height: 50px;
    }
}
.userbtn{
    width: 116px;
    padding: 10px 15px;
}
.tabletitle{
    font-size: 15px;
}
.border_b{
    border-bottom: 1px solid #EBEBEB;
}
// .home_header{
//     color: #000;
//     font-size: 15px;
//     font-weight: bold;
//     margin: 15px 0;
// }
// .boxradius{
//     border-radius: 6px;
//     padding: 20px;
// }
// .lablefont{
//     font-weight: 700;
//     margin-bottom: 15px;
// }
// .line{
//     margin: 0 15px;
//     height: 36px;
//     line-height: 36px;
// }
// .savebtn{
//     width: 100px;
// }
</style>